<template>
  <div>
    <van-list
      :immediate-check="listCheck"
      color="#466ca3"
      v-model:loading="loadingInt"
      :finished="finishedInt"
      finished-text="没有更多了"
      @load="getDemandList"
    >
      <van-cell-group
        inset
        title=""
        v-for="item in list.demandList"
        :key="item"
        class="demandBorderStyle"
        :class="
          item.ryD_Level == '1'
            ? 'boder-blue'
            : '' || item.ryD_Level == '2'
            ? 'boder-yellow'
            : '' || item.ryD_Level == '3'
            ? 'boder-orange'
            : '' || item.ryD_Level == '4'
            ? 'boder-red'
            : ''
        "
      >
        <van-swipe-cell>
          <van-cell
            :border="false"
            :to="'AndroidDemandInfo?RYD_DemandId=' + item.ryD_DemandId"
          >
            <van-row>
              <van-col span="12">
                {{ item.ryD_UserName }}
                [{{ item.ryD_DemandTypeName }}]
                <span v-for="cp in companyList" :key="cp">
                  <span v-if="cp.ryD_CompanyNo == item.ryD_Company">
                    [{{ cp.ryD_CompanyName }}]
                  </span>
                </span>
              </van-col>
              <van-col span="12" style="text-align: right">
                事件等级：
                <span v-if="item.ryD_Level == 1">一般</span>
                <span v-if="item.ryD_Level == 2">紧急</span>
                <span v-if="item.ryD_Level == 3">严重</span>
                <span v-if="item.ryD_Level == 4">重大</span>
              </van-col>
            </van-row>
            <van-row v-if="demandState == 1">
              <van-col span="10">发起时间：</van-col>
              <van-col span="14" style="text-align: right">
                {{ dateTimeSpan(item.ryD_UserStartTime) }}
              </van-col>
            </van-row>
            <van-row v-if="demandState == 2">
              <van-col span="10">接单时间：</van-col>
              <van-col span="14" style="text-align: right">
                {{ dateTimeSpan(item.ryD_ItStartTime) }}
              </van-col>
            </van-row>
            <van-row v-if="demandState == 3">
              <van-col span="10">完成时间：</van-col>
              <van-col span="14" style="text-align: right">
                {{ dateTimeSpan(item.ryD_ItEndTime) }}
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">IT负责人：<span style="text-decoration:line-through;color:red;">{{item.ryD_OldItName}} </span> {{ item.ryD_Name }}</van-col>
              <van-col span="12" style="text-align: right"
                >IT联系方式：<span style="text-decoration:line-through;color:red;">{{item.ryD_OldItPhone}} </span> {{ item.ryD_Phone }}</van-col
              >
            </van-row>
            <van-row>
              <van-col span="12">订单单号：{{ item.ryD_DemandId }}</van-col>
              <van-col
                span="12"
                style="text-align: right; color: red"
                v-if="item.ryD_State == -2"
                >状态：暂存
              </van-col>
              <van-col
                span="12"
                style="text-align: right; color: red"
                v-if="item.ryD_State == 1"
                >状态：未接单
              </van-col>
              <van-col
                span="12"
                style="text-align: right; color: blue"
                v-if="item.ryD_State == 2"
                >状态：已接单
              </van-col>
              <van-col
                span="12"
                style="text-align: right; color: green"
                v-if="item.ryD_State == 3"
                >状态：已处理
              </van-col>
              <van-col
                span="12"
                style="text-align: right; color: green"
                v-if="item.ryD_State == 4"
                >状态：已评价
              </van-col>
              <van-col
                span="12"
                style="text-align: right; color: green"
                v-if="item.ryD_State == 5"
                >状态：手动记录
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24">需求详情：<div style="font-weight: bold;margin-top: 5px;">{{ item.ryD_DemandDetails }}</div></van-col>
            </van-row>
            <van-row v-if="item.ryD_State==-2" style="color:red">
              <van-col span="24">回退原因：<br />{{ item.ryD_Fallback }}</van-col>
            </van-row>
          </van-cell>
          <template #right>
            <van-button
              style="height: 100%"
              square
              text="撤销"
              type="danger"
              v-if="RYD_UserId == item.ryD_UserId"
            />
            <!-- <van-button style="height: 100%;" square text="升级" type="warning" v-if="(RYD_UserId==item.ryD_ItId&&item.ryD_ToItId==null)||RYD_UserId==item.ryD_ToItId" />
                        <van-button style="height: 100%;" square text="降级" type="primary" v-if="(RYD_UserId==item.ryD_ItId&&item.ryD_ToItId==null)||RYD_UserId==item.ryD_ToItId" /> -->
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "ListData",
};
</script>
<script setup>
// eslint-disable-next-line no-unused-vars
import { computed, ref, toRef, watch } from "vue";
// eslint-disable-next-line no-unused-vars
import axios from "@/utils/axios";
import dateTimeSpan from "@/utils/dateTime";

// eslint-disable-next-line no-undef
const props = defineProps({
  list: {},
  companyList: [],
  loading: Boolean,
  finished: Boolean,
  listCheck: Boolean,
  demandState: Number,
  RYD_UserId: String,
});
// eslint-disable-next-line no-undef
const emit = defineEmits(["getDemandList", "setLoading", "setFinished"]);

let loading = toRef(props, "loading");

let finished = toRef(props, "finished");

let listCheck = toRef(props, "listCheck");

let demandState = toRef(props, "demandState");

let RYD_UserId = toRef(props, "RYD_UserId");

let list = ref(props.list);
let getDemandList = () => {
  if (loading.value == false) {
    emit("getDemandList");
  }
};

let loadingInt = computed({
  get: () => {
    return loading.value;
  },
  set: (val) => {
    emit("setLoading", val);
  },
});

let finishedInt = computed({
  get: () => {
    return finished.value;
  },
  set: (val) => {
    emit("setFinished", val);
  },
});
</script>

<style scoped>
.demandBorderStyle {
  margin: 10px;
}

.boder-blue {
  border: 2px solid #466ca3;
}

.boder-yellow {
  border: 2px solid rgb(255, 102, 0);
}

.boder-orange {
  border: 2px solid rgb(255, 187, 0);
}

.boder-red {
  border: 2px solid red;
}
</style>
